<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格练习</title>
    <style>
        body {
            text-align: center;
        }

        table {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        th,
        td {
            line-height: 2em;
        }
    </style>
</head>

<body>
    <button class="addRow">新增一条信息</button>
    <button class="sortAge">年龄按从小到大排序</button>
    <button class="delSelected">删除选中</button>
    <br><br>

    <table border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>

    <script>
        // 获取节点
        let addRow = document.querySelector(".addRow")
        let sortAge = document.querySelector('.sortAge')
        let delSelected = document.querySelector('.delSelected')
        let tbody = document.querySelector("tbody")
        let data = [
            { name: "胡杭", age: 16 },
            { name: "胜明", age: 22 },
            { name: "军毅", age: 21 },
            { name: "晓华", age: 13 },
            { name: "盛聪", age: 23 },
            { name: "侦剑", age: 32 },
            { name: "红翔", age: 25 },
            { name: "超维", age: 18 },
            { name: "士琪", age: 22 },
            { name: "艳华", age: 20 },
        ];

         // 对数据进行处理，添加标识符 具体是对数组里的对象添加属性
         data.forEach(function (item) {
          //  对每个对象添加属性 用来标识符
          item.added = false 
             
         });
         // 添加信息
         addRow.addEventListener('click',function () {
             //先将data从头进行遍历，查找一个没有被添加过的数据，找到后就中断
             for(let i =0;i<data.length;i++){
                 //当前对象数据
                 let userData = data[i]
                 if (userData.added === false ) {
                     // 渲染页面
                     let tr =document.createElement('tr')
                     tr.innerHTML += `
                    <td>${i + 1}</td>
                    <td>${userData.name}</td>
                    <td>${userData.age}</td>
                    <td><button>删除</button></td>
                    <td><input type="checkbox" data-index="${i}"></td>`
                     tbody.appendChild(tr)
                     // 添加删去按钮 事件监听
                 tr.addEventListener('click',function (e) {
                     if (e.target.nodeName.toLowerCase()==='button') {
                         e.target.parentNode.parentNode.remove()
                         update()
                     }
                 })
                 
                //   update()
                 return userData.added = true
                 }
             }
         })


         // 年龄排序
        sortAge.addEventListener('click',function () {
            let rows =tbody.rows
            
        // 为了方便 用sort方法排序 把rows 把数据存到一个新的数组中
            let arr = []
            for(let i=0 ;i < rows.length ; i++){
                arr.push(rows[i])
            }
        //    console.log(arr);
        arr.sort(function (a,b) {
            return a.children[2].innerText  - b.children[2].innerText
        })
      

        arr.forEach(function (item) {
            tbody.appendChild(item)
            update()
        })



        })
            
        // 删除选中
     delSelected.addEventListener('click',function () {
         let inputList =document.querySelectorAll('table input[type=checkbox]')
        //  console.log(inputList);
        inputList.forEach(function (item,index) {
            if (item.checked) {
                let index = item.dataset.index
                data[index].added=false
                item.parentNode.parentNode.remove()
                update()
            }
        })
     })  
          

   // 序号更新
   function update() {
            let rows = tbody.rows
            for (let i = 0; i < rows.length; i++) {
                rows[i].children[0].innerText = i + 1
            }
        }

     
    </script>
</body>

</html>